<template>
  <div class="app-container">
    <div class="h-4 w-100 d-flex">
      <!--  -->
      <div class="h-100 w-3">
        <!-- 1号楼1层总能耗 -->
        <div class="h-50 w-100 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">1号楼1层总能耗<span class="font-12">（kW·h）</span></div>
              </div>
            </div>
            <div class="d-flex justify-content-between item_content">
              <div class="w-50 pt-3">
                <div class="h-50 mr-2 pb-2">
                  <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                    <div class="h-100 item_width item_bg_warning"></div>
                    <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                      <div class="font-white font-12">东区总开一 用电量</div>
                      <div class="d-flex-center">
                        <div class="font-white-impact font-34 mr-2">{{$formatNumber2(oneCarData1.deviceValue)}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 mr-2 pt-2">
                  <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                    <div class="h-100 item_width item_bg_danger"></div>
                    <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                      <div class="font-white font-12">西区总开三 用电量</div>
                      <div class="d-flex-center">
                        <div class="font-white-impact font-34 mr-2">{{$formatNumber2(oneCarData3.deviceValue)}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="w-50 pt-3">
                <div class="h-50 ml-2 pb-2">
                  <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                    <div class="h-100 item_width item_bg_color1"></div>
                    <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                      <div class="font-white font-12">东区总开二 用电量</div>
                      <div class="d-flex-center">
                        <div class="font-white-impact font-34 mr-2">{{$formatNumber2(oneCarData2.deviceValue)}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="h-50 ml-2 pt-2">
                  <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                    <div class="h-100 item_width item_bg_color2"></div>
                    <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                      <div class="font-white font-12">宿管间 用电量</div>
                      <div class="d-flex-center">
                        <div class="font-white-impact font-34 mr-2">{{$formatNumber2(oneCarData4.deviceValue)}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 公共区域能耗 -->
        <div class="h-50 w-100 p10">
          <div class="h-100 w-100 item_border p10">
            <div class="item_title">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">公共区域能耗<span class="font-12">（kW·h）</span></div>
              </div>
            </div>
            <div class="d-flex flex-wrap align-items-center justify-content-between item_content">
              <div class="width-30 h-50 pt-3" v-for="(item,index) in twoCardData" :key="index">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width" :class="threeCardBg[index]"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">{{twoCardTitle[index]}}</div>
                    <div class="d-flex-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber2(item.deviceValue)}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼1层房间能耗 -->
      <div class="h-100 w-9 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼1层房间能耗<span class="font-12">（kW·h）</span></div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100">
              <div class="w-100 h-100 d-flex flex-wrap">
                <div class="width-20 height-33 p10" v-for="(item, index) in fourCarData" :key="index">
                  <div class="w-100 h-100 d-flex flex-column justify-content-between item_border p10">
                    <div class="font-white font-14">{{fourCardTitle[index]}}</div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div class="d-flex-center mr-3">
                        <el-image class="image_size2" :src="kt_info" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-center">
                        <div class="font-white-impact2 font-34 mr-2">{{$formatNumber2(item.deviceList[0].deviceValue)}}</div>
                      </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                      <div class="d-flex-center mr-3">
                        <el-image class="image_size2" :src="cz_info" fit="cover"></el-image>
                      </div>
                      <div class="d-flex align-items-center">
                        <div class="font-white-impact3 font-34 mr-2">{{$formatNumber2(item.deviceList[1].deviceValue)}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-2 w-100 d-flex">
      <!-- 房间照明能耗 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">房间照明能耗<span class="font-12">（kW·h）</span></div>
            </div>
          </div>
          <div class="d-flex justify-content-between item_content">
            <div class="w-50 pt-3">
              <div class="h-50 mr-2 pb-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_warning"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">1101-1106室用电量</div>
                    <div class="d-flex-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber2(threeCardData0.deviceValue)}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="h-50 mr-2 pt-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_danger"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">1114室用电量</div>
                    <div class="d-flex-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber2(threeCardData2.deviceValue)}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-50 pt-3">
              <div class="h-50 ml-2 pb-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_color1"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">1107-1112室用电量</div>
                    <div class="d-flex-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber2(threeCardData1.deviceValue)}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="h-50 ml-2 pt-2">
                <div class="h-100 w-100 d-flex align-items-center item_bg_border">
                  <div class="h-100 item_width item_bg_color2"></div>
                  <div class="h-100 item_width2 d-flex flex-column justify-content-around pl-2 pt-2 pb-2">
                    <div class="font-white font-12">1115室用电量</div>
                    <div class="d-flex-center">
                      <div class="font-white-impact font-34 mr-2">{{$formatNumber2(threeCardData3.deviceValue)}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 1号楼1层能耗分布 -->
      <div class="h-100 w-3 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼1层能耗分布</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-3" id="pie-first"></div>
          </div>
        </div>
      </div>
      <!-- 1号楼1层房间能耗对比 -->
      <div class="h-100 w-6 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">1号楼1层房间能耗对比</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-3" id="bar-first"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListEnergyByNum,
    queryTwoListEnergyByNum,
    queryThreeListEnergyByNum,
    queryFourListEnergyByNum,
    queryFiveListEnergyByReport,
    querySixListEnergyByReport
  } from "@/api/dormOneBuildingOneFloor/energyAnalysis"

  export default {
    components: {},
    data() {
      return {
        line_one: require('@/assets/img/line_one.png'),
        cz_info: require('@/assets/img/cz_info.png'),
        kt_info: require('@/assets/img/kt_info.png'),

        timeout: [],

        oneCarData1: {},
        oneCarData2: {},
        oneCarData3: {},
        oneCarData4: {},

        twoCardData: [],
        twoCardTitle: ['东区过道照明1', '东区过道照明2', '西区过道照明', '应急照明', '饮水机', '洗衣机'],
        threeCardBg: ['item_bg_success', 'item_bg_success', 'item_bg_color2', 'item_bg_danger', 'item_bg_warning', 'item_bg_color1'],

        threeCardData0: {},
        threeCardData1: {},
        threeCardData2: {},
        threeCardData3: {},

        fourCarData: [],
        fourCardTitle: ['1101室', '1102室', '1103室', '1104室', '1105室', '1106室', '1107室', '1108室', '1109室', '1110室', '1111室', '1112室', '1114室', '1115室', '宿管间'],
        fiveCardData: [],
        sixCardData: {
          xData: [],
          seriesData1: [],
        },
      }
    },
    created() {
    },
    mounted() {
      this.queryOneListEnergyByNum()
      this.queryTwoListEnergyByNum()
      this.queryThreeListEnergyByNum()
      this.queryFourListEnergyByNum()
      this.queryFiveListEnergyByReport()
      this.querySixListEnergyByReport()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListEnergyByNum()
        _this.queryTwoListEnergyByNum()
        _this.queryThreeListEnergyByNum()
        _this.queryFourListEnergyByNum()
        _this.queryFiveListEnergyByReport()
        _this.querySixListEnergyByReport()
      }, 30000);

      // this.timeout[1] = setInterval(() => {

      // }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListEnergyByNum() {
        queryOneListEnergyByNum().then(res => {
          let tempData = res.object
          this.oneCarData1 = tempData[0]
          this.oneCarData2 = tempData[1]
          this.oneCarData3 = tempData[2]
          this.oneCarData4 = tempData[3]
        })
      },
      queryTwoListEnergyByNum() {
        queryTwoListEnergyByNum().then(res => {
          let tempData = res.object
          this.twoCardData = tempData

          let yjd = tempData[3].deviceValue
          let ysj = tempData[4].deviceValue

          let yjd2 = this.$subtractAndAssign(yjd, ysj)
          this.$set(this.twoCardData[3], 'deviceValue', yjd2);
        })
      },
      queryThreeListEnergyByNum() {
        queryThreeListEnergyByNum().then(res => {
          let tempData = res.object
          this.threeCardData0 = tempData[0]
          this.threeCardData1 = tempData[1]
          this.threeCardData2 = tempData[2]
          this.threeCardData3 = tempData[3]
        })
      },
      queryFourListEnergyByNum() {
        queryFourListEnergyByNum().then(res => {
          let tempData = res.object || []

          this.fourCarData = tempData
        })
      },

      queryFiveListEnergyByReport() {
        queryFiveListEnergyByReport().then(res => {
          let tempData = res.object || []
          let tempData2 = []
          for (let i = 0; i < tempData.length; i++) {
            tempData2.push({
              value: this.$formatNumber2(tempData[i].yValue),
              name: tempData[i].xValue,
            })
          }

          this.fiveCardData = tempData2

          charts.pieEchart('pie-first', this.fiveCardData)
        })
      },
      querySixListEnergyByReport() {
        querySixListEnergyByReport().then(res => {
          let tempData = res.object || []
          let xData = []
          let seriesData1 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue == '宿管间' ? tempData[i].xValue : tempData[i].xValue + '室')

            seriesData1.push(this.$formatNumber2(tempData[i].yValue))
          }

          this.sixCardData.xData = xData
          this.sixCardData.seriesData1 = seriesData1
          charts.barEchart('bar-first', this.sixCardData)
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-33 {
    height: 33.33%;
  }

  .width-77 {
    width: 76.67%;
  }


  .width-30 {
    width: 32%;
  }

  .width-20 {
    width: 20%;
  }

  .item_width {
    width: 8px;
  }

  .item_width2 {
    width: calc(100% - 8px);
  }

  .item_bg_success {
    background-color: #1AA652;
  }

  .item_bg_warning {
    background-color: #FFB822;
  }

  .item_bg_danger {
    background-color: #FF6A93;
  }

  .item_bg_color1 {
    background-color: #87f7c7;
  }

  .item_bg_color2 {
    background-color: #1292b1;
  }

  .item_bg_border {
    background-color: #0A343D;
    border-radius: 4px;
    overflow: hidden;
  }


  .image_size {
    width: calc(100% - 0px);
    height: 48px;
  }

  .image_size2 {
    width: 38px;
    height: 38px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .font-blue {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #6CA7B4;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
  }

  .font-white-impact2 {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 0px 4px #16d0ff !important;
  }

  .font-white-impact3 {
    font-family: Impact, Impact-400;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 0px 4px #fed52f !important;
  }
</style>
